import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
    Button,
    Checkbox,
    List,
    Dialog,
    Popup,
    Form,
    Input,
    Radio,
    Space,
} from "antd-mobile";
import {
    addPerson,
    addSelectedPerson,
    delPerson,
    removeSelectedPerson,
    updatePerson,
} from "../../reducers/personSlice";
// import http from '../../utils/http'

function Person() {
    const personSlice = useSelector((state) => state.personSlice);
    const dis = useDispatch();
    const [visible, setVisible] = useState(false);
    const [form] = Form.useForm();

    const onFinish = (values) => {
        if (values.id) {
            form.resetFields();
            dis(updatePerson(values));
            setVisible(false);
        } else {
            form.resetFields();
            dis(addPerson(values));
            setVisible(false);
        }
    };
    return (
        <div>
            <Button
                block
                color="primary"
                onClick={() => {
                    setVisible(true);
                }}
            >
                新增乘车人
            </Button>

            <Popup visible={visible}>
                <Form
                    form={form}
                    onFinish={onFinish}
                    footer={
                        <Button
                            block
                            type="submit"
                            color="primary"
                            size="large"
                        >
                            提交
                        </Button>
                    }
                >
                    <Form.Item label="ID" name="id" hidden>
                        <Input />
                    </Form.Item>
                    <Form.Item label="姓名" name="name">
                        <Input />
                    </Form.Item>
                    <Form.Item label="类型" name="type">
                        <Radio.Group>
                            <Space direction="vertical">
                                <Radio value="老年人">老年人</Radio>
                                <Radio value="成人">成人</Radio>
                                <Radio value="未成年">未成年</Radio>
                            </Space>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Popup>
            <List>
                {personSlice.map((item) => {
                    return (
                        <List.Item
                            key={item.id}
                            extra={
                                <div>
                                    <Button
                                        onClick={() => {
                                            dis(delPerson(item.id));
                                        }}
                                    >
                                        删除
                                    </Button>
                                    <Button
                                        onClick={() => {
                                            setVisible(true);
                                            form.setFieldsValue(item);
                                        }}
                                    >
                                        编辑
                                    </Button>
                                </div>
                            }
                        >
                            <Checkbox
                                checked={item.status}
                                onChange={(checked) => {
                                    if (checked) {
                                        dis(addSelectedPerson(item.id));
                                    } else {
                                        dis(removeSelectedPerson(item.id));
                                    }
                                }}
                            />
                            {item.name}
                        </List.Item>
                    );
                })}
            </List>
        </div>
    );
}

export default Person;
